<template>
    <div  class="container-fluid">
        <div class="row show-grid" v-for="(item,index) in inputDefine.inputDefines"  :key="item.key">
            <div class="col-sm-3">
                <label class="control-label">{{item.displayName}}</label>

                <button  v-if="isRoot==false" class="btn btn-default btn-xs" @click="deleteItem(item,index)">&times;</button>
            </div>

            <div  class="col-sm-9">
                <template v-if="item.elementType === 'input' ">
                    <input-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
                </template>
                <template v-else-if="item.elementType === 'textarea' " >
                    <textarea-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
                </template>
                <template v-else-if="item.elementType === 'radio' ">
                    <radio-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
                </template>
                <template v-else-if="item.elementType === 'select' ">
                    <select-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
                </template>
                <template v-else-if="item.elementType === 'checkbox' ">
                    <checkbox-element :inputDefine="item" :elementData="myFormData[item.key]" @dataChange="dataChange"/>
                </template>
                <template v-else-if="item.elementType === 'formObject' ">
                    <form-element :inputDefine="item" :formData="myFormData[item.key]" :isRoot="false" @dataChange="dataChangeObject"
                                  @addElementPop="addElementPop" @deleteItemPop="deleteItemPop"/>
                </template>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <template v-if="isRoot">
                    <button  class="btn btn-default" @click="submit();">获取数据</button>
                </template>
                <template v-else>
                    <button  class="btn btn-default" @click="addElement();">添加子元素</button>
                </template>
            </div>
        </div>
    </div>
</template>


<script>
    import InputElement from './InputElement.vue'
    import TextareaElement from './TextareaElement.vue'
    import RadioElement from './RadioElement.vue'
    import SelectElement from './SelectElement.vue'
    import CheckboxElement from './CheckboxElement.vue'

    var FormObject=Vue.extend({
            data(){
                  var parentInputDefine=this.inputDefine;
                  var myFormData=this.formData;
                  var myInputDefines=parentInputDefine.inputDefines;
                  for(var index=0;index<myInputDefines.length;index++){
                    var item=myInputDefines[index];
                    if(myFormData[item['key']]==null){
                        myFormData[item['key']]=item.defValue;
                    }
                  }
                  return{
                        myFormData:myFormData
                  }
            },
            created:function(){
            },
            compute:{

            },
            components:{
                 'input-element':InputElement,
                 'textarea-element':TextareaElement,
                 'radio-element':RadioElement,
                 'select-element':SelectElement,
                 "checkbox-element":CheckboxElement
            },
            methods:{
               submit:function(){
                 var myInputDefines=this.inputDefine.inputDefines;
                 for(var item in this.myFormData){
                    if(!this.containsDefine(myInputDefines,item)){
                        Vue.delete(this.myFormData,item);
                    }
                 }
                 this.$emit('submit',this.myFormData);
               },
               dataChange:function(inputDefine,dataInfo){
                    this.myFormData[inputDefine.key]=dataInfo['newValue'];
                    var dataInfo={"newValue":this.myFormData}
                    this.$emit('dataChange',this.parentInputDefine,dataInfo);
                },
                addElement:function(){
                       var _this=this;
                     gDialog.fPrompt("请输入属性名","属性名","",function(value){
                        if(value!=null && value!=''){
                         // this.myInputDefines.push({key:"key_new"+time,name:"key1"+time,displayName:"新增了key", elementType:"input",defValue:"2121"});
                          _this.$emit('addElementPop',_this.inputDefine,{key:value,name:value,displayName:value, elementType:"input",defValue:""});
                        }
                     });
                 },
                deleteItem:function(item,index){
                   //  this.myInputDefines.splice(index,1);
                     this.$emit('deleteItemPop',this.inputDefine,item,index);
                },
                  addElementPop:function(inputDefine,newItem){
                    if(this.isRoot){
                        inputDefine.inputDefines.push(newItem);
                    }else{
                        this.$emit('addElementPop',newItem);
                    }
                 },
                deleteItemPop:function(inputDefine,item,index){
                     if(this.isRoot){
                         inputDefine.inputDefines.splice(index,1);
                    }else{
                         this.$emit('deleteItemPop',inputDefine,item,index);
                    }
                },
                containsDefine(inputDefines,key){
                    if(inputDefines==null || inputDefines.length<1){
                        return false;
                    }

                    for(var i=0;i<inputDefines.length;i++){
                      if(inputDefines[i]['key']==key){
                        return true;
                      }

                    }
                    return false;
                },

                 indexOfInputDefine(inputDefines,item){
                    if(inputDefines==null || inputDefines.length<1){
                        return -1;
                    }
                    for(var i=0;i<inputDefines.length;i++){
                      if(inputDefines[i]==item){
                        return i;
                      }
                    }
                    return -1;
                }
            },
            props:{
              inputDefine:{
                type:Object,
                required: true
              },
              formData:{
                 type:Object,
                 required: true
              },
              isRoot:{
                type:Boolean,
                 required: false
              }
            }


       });

    Vue.component('form-element',FormObject);
    export default FormObject;
</script>
